<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>已注册司机</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/animate.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <link href="/static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>未注册司机</h4></div>
        <div class="card-body">
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
          <table id="table"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 显示大图部分 -->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel">
  <div class="modal-dialog modal-lg"><!-- style="display: inline-block; width: auto;" -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="modalLabel"></h4>
      </div>
      <img alt="暂无图片" id="imgInModalID" src="" width="100%">
    </div>
  </div>
</div>

<!--审核modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">审核</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            拒绝原因：
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <textarea id="remark" rows="3"></textarea>
            <span class="help-block"></span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-danger" id="refuse_btn">拒绝</button>
        <button type="button" class="btn btn-primary" id="pass_btn">通过</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="/static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript"
        src="/static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript"
        src="/static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="/static/js/main.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  $('#table').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/driver',
    method: 'get',
    dataType: 'json',
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮

    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    paginationLoop: false,                // 禁用分页循环
    paginationSuccessivelySize: 5,        // 连续的最大连续页数
    paginationPagesBySide: 1,            // 当前页面每侧（右、左）的页数
    sortName: "lastEditTime",
    sortOrder: "asc",                    // 排序方式
    queryParams: function (params) {
      let param = {
        limit: params.limit,         // 每页数据量
        page: (params.offset / params.limit) + 1, //查询页码
        search: params.search,        // 搜索内容
        verify_status: [0, 2],   //审核通过状态
        sort: params.sort,
        order: params.order
      };
      return param;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 5,                        // 每页的记录行数
    pageList: [5, 6, 7, 8, 9, 10],         // 可供选择的每页的行数
    search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    searchHighlight: true,          // 搜索高亮
    searchOnEnterKey: true,         //按 Enter 键搜索

    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

    columns: [{
      checkbox: true    // 是否显示复选框
    }, {
      field: 'id',
      title: 'ID',
      sortable: true    // 是否排序
    }, {
      field: 'name',
      title: '司机姓名'
    }, {
      field: 'phone',
      title: '联系方式',
    }, {
      field: 'pic',
      title: '司机照片',
      formatter: function (value, row, index) {
        let s = '<a class = "view"  href="javascript:void(0)"><img style="width:70px;height:30px;"  src="/static/driver_pic/' + value + '" /></a>';
        return s;
      },
      events: {
        'click .view': function (e, value, row, index) {
          $("#imgInModalID").attr("src", getContextPath() + "/static/driver_pic/" + row.pic);
          $("#imgModal").modal('show')
        }
      }
    }, {
      field: 'licencePic',
      title: '驾驶证照片',
      formatter: function (value, row, index) {
        let s = '<a class = "view"  href="javascript:void(0)"><img style="width:70px;height:30px;"  src="/static/licence_pic/' + value + '" /></a>';
        return s;
      },
      events: {
        'click .view': function (e, value, row, index) {
          $("#imgInModalID").attr("src", getContextPath() + "/static/licence_pic/" + row.licencePic);
          $("#imgModal").modal('show')
        }
      }
    }, {
      field: 'createTime',
      title: '申请时间',
      formatter: formatTimeStr
    }, {
      field: 'lastEditTime',
      title: '最近编辑时间',
      formatter: formatTimeStr,
      sortable: true
    }, {
      field: 'verify',
      title: '审核状态',
      sortable: true,
      formatter: function (value, row, index) {
        if (value === 0) {
          return "<span class='label label-primary'>待审核</span>"
        } else if (value === 2) {
          return "<span class='label label-danger'>未通过</span>"
        }
      }
    }, {
      field: 'operate',
      title: '操作',
      formatter: btnGroup,  // 自定义方法
      events: {
        'click .edit-btn': function (event, value, row, index) {
          editUser(row.id);
        },
        'click .del-btn': function (event, value, row, index) {
          delUser(row.id);
        },
        'click .show-btn': function (event, value, row, index) {
          showUser(row);
        }
      }
    }],
    onEditableSave: function (field, row, oldValue, $el) {
      $.ajax({
        type: "PUT",
        url: "/driver/" + row.id,
        data: {
          id: row.id,
          status: row.status
        },
        dataType: 'json',
        success: function (res) {
          if (res.flag) {
            // 这里的状态显示有自定义样式区分，做单行的更新
            $('#table').bootstrapTable('updateRow', {index: row.id, row: row});
            msgNotify(res.msg, "success", 1500)
          } else {
            msgNotify(res.msg, "danger", 1500)
          }
        },
        error: function () {
          msgNotify('修改失败，请稍后再试', "danger", 1500)
        }
      });
    },
    onLoadSuccess: function (data) {
      $("[data-toggle='tooltip']").tooltip();
    }
  });

  // 操作方法 - 审核
  function editUser(id) {
    $("#remark").val("")
    $("#refuse_btn").attr('edit-id', id)
    $("#pass_btn").attr('edit-id', id)
    $("#myModal").modal({
      backdrop: 'static'
    })
  }

  // 操作方法 - 删除
  function delUser(id, status) {
    if (status === 2) {
      tb_deleteOne(id, '/driver')
    }
  }

  // 操作方法 - 查看
  function showUser() {}

  $("#refuse_btn").click(function () {
    let $remark = $("#remark")
    let remark = $remark.val()
    if (remark === '' && $.trim(remark).length !== 0) {
      $remark.parent().removeClass('has-success').addClass('has-error')
      $remark.next("span").text("请谈些拒绝原因")
      return false
    } else {
      $remark.parent().addClass('has-success').removeClass('has-error')
      $remark.next("span").text("")
    }

    $("#myModal").modal('hide')
    let id = $(this).attr("edit-id")
    $.ajax({
      type: 'PUT',
      url: '/driver/' + id,
      data: {verify: 2, remark: remark},
      success: function (res) {
        load()
        if (res.flag) {
          msgNotify('已审核', 'success', 1500)
        } else {
          msgNotify('审核失败', 'danger', 1500)
        }
      },
      error: function () {
        msgNotify('审核失败', 'danger', 1500)
      }
    })
  })

  $("#pass_btn").click(function () {
    $("#myModal").modal('hide')
    let id = $(this).attr('edit-id')
    $.ajax({
      type: 'PUT',
      url: '/driver/' + id,
      data: {verify: 1},
      success: function (res) {
        load()
        if (res.flag) {
          msgNotify('已审核', 'success', 1500)
        } else {
          msgNotify('审核失败', 'danger', 1500)
        }
      },
      error: function () {
        msgNotify('审核失败', 'danger', 1500)
      }
    })
  })

</script>

</body>
</html>